.nav-tooltip {
	color: red;
}

.header-menu-icon_background {
	background: #ffffff6b;
	border-radius: var(--border-radius);
}

.user-menu.el-menu.el-menu-dark .el-menu-item-selected {
	background: #32363a;
	color: rgba(255, 255, 255, 0.67);
}

.user-menu.el-menu-dark .el-menu-item-selected > a {
	color: rgba(255, 255, 255, 0.67);
}

/* .app-header-wrapper.css */
.app-header-wrapper {
	padding: var(--app-padding);
	box-shadow: var(--el-box-shadow-light);
	height: 24px;
	display: flex;
	align-items: center;

	.logo {
		position: relative;
		float: left;
		line-height: 0.56rem;
		height: 0.56rem;
		width: 56px;
		border-right: 1px solid #55616d;
		border-left: 1px solid #55616d;
		background-color: inherit;
		transition: all 0.2s;

		&:hover {
			background-color: var(--app-brand);
		}

		.href {
			text-decoration: none;
			display: block;
		}

		.logo-name {
			color: var(--color-white);
			font-size: 0.24rem;
			font-weight: 300;
			margin-left: 0.38rem;
		}

		.img {
			position: absolute;
			left: 0;
			top: 50%;
			left: 50%;
			transform: translate(-16px, -17px);
		}

		.ui-badge {
			position: absolute;
			right: -18px;
			top: 6px;
			width: 30px;
			height: 21px;
			background-size: 236px 21px;
			background-repeat: no-repeat;
			background-image: none;
		}

		// &:before, &:after {
		//   content: '';
		//   display: block;
		//   width: 2px;
		//   height: .56rem;
		//   background-color: #222;
		//   border-left: 1px solid #575D67;
		//   position: relative;
		//   top: 0;
		// }
		// &:before {
		//   float: left;
		//   left: -.08rem;
		// }
		// &:after {
		//   float: right;
		//   right: -.27rem;
		// }
	}

	.nav-toolbar {
		font-size: 0.15rem;
		float: left;
	}

	.user-menu {
		margin-top: 20px;
	}

	.user-toolbar {
		float: right;
		height: 0.54rem;
		display: flex;
		align-items: center;

		.item-search {
			width: 2rem;
		}

		.toolbar-li {
			float: left;
			font-size: 0.14rem;
			cursor: pointer;
			color: #ccc;
			margin-left: 0.16rem;
			transition: color 0.2s;

			& a {
				color: #ccc;
			}

			.dropdown-link {
				color: #ccc;
				transition: color 0.2s;
				// .el-avatar-image{
				//   margin-bottom: -10px;
				// }
				// .el-avatar > img{
				//   height: auto;
				// }
				.avatar-image {
					margin-bottom: -10px;
					display: inline-block;
					text-align: center;
					background: #ccc;
					color: #fff;
					white-space: nowrap;
					position: relative;
					overflow: hidden;
					width: 32px;
					height: 32px;
					line-height: 0;
					border-radius: var(--border-radius);
				}

				.avatar-image > img {
					height: auto;
					width: 100%;
					display: bloack;
				}
			}

			.anticon.active {
				color: var(--app-brand);
			}

			&:hover {
				.dropdown-link {
					color: var(--app-brand);
				}
			}

			.name {
				margin-left: 0.08rem;
			}
		}
	}
}

.header-dropdown-menu-item {
	span {
		color: var(--el-text-color-regular);
		font-size: var(--el-font-size-base);
	}

	&:hover {
		text-decoration: none;
	}
}
